<template>
	<view class="box">
		<view class="display">
			<view class="display_item">
				<text class="serviceStore">服务门店:</text>
				<text class="storeName">{{shopdata.storeName}}</text>
			</view>
			<view class="display_item">
				<text class="serviceStore">营业时间:</text>
				<text class="storeName">{{shopdata.businessTime}}</text>
			</view>
			<view class="display_item choos selecttime">
				<text class="serviceStore">服务开始时间:</text>
				<view class="storeName">
					<KXDateTime :date='date' :end='enddate' :start='startdate' @rundata='kxdatetime' default='start' placeholder='请选择时间'></KXDateTime>
				</view>

			</view>
		</view>
		<view class="appointment" @click="toyuyue">
			去预约
		</view>
	</view>
</template>

<script>
	import KXDateTime from "@/components/kx-datetime/kx-datetime.vue"
	export default {
		data() {
			return {
				shopdata: {},
				date: '',
				startdate: '2021-04-02 12:12',
				enddate: '2040-05-30 23:59',
				shopid:'',
			}
		},
		components:{
			KXDateTime
		},
		onLoad(option) {
			console.log(5555, option)
			this.getdata(option.id)
			this.shopid = option.id
		},
		methods: {
			kxdatetime(e) {
				this.date = e
				console.log('ssss',e)
			},
			//获取预约数据准备
			getdata(id) {
				var that = this
				var data = {}
				var http = '/api/user/storeOrder/prepare/' + id
				that.$http(http, 'GET', data).then((res) => {
					console.log('返回参数', res.data.data)
					that.shopdata = res.data.data
					that.startdate = res.data.data.startTime
					that.date = res.data.data.startTime
					that.enddate = res.data.data.startTimeDown
				})
			},
			//去预约
			toyuyue() {
				console.log(this.date, this.shopdata)
				var data = {
					storeName:this.shopdata.storeName,
					businessTime:this.shopdata.businessTime,
					startTime:this.date
				}
				uni.setStorageSync('orderData',data)
				uni.navigateTo({
					url: "../projectList/projectList?id=" + this.shopid
				})
			},
		}
	}
</script>

<style lang="scss">
	.selecttime{
		display: flex;
		align-items: center;
	}
	.box {
		width: 750rpx;
		height: 100%;

		.display {
			width: 750rpx;

			.display_item {
				width: 750rpx;
				height: 74rpx;
				line-height: 74rpx;
				border-bottom: 1px solid #E5E5E5;
				border-top: 1px solid #E5E5E5;

				.serviceStore {
					padding: 7px 10px;
					font-size: 35rpx;
					font-weight: bold;
					box-sizing: border-box;
				}

				.storeName {
					font-size: 25rpx;
					color: #B1ADAD;
				}

				.uni-datetime-picker {
					display: inline-block;

					.uni-datetime-picker-timebox {
						border: none;

						.uni-datetime-picker-down-arrow {
							display: none;
						}
					}
				}

			}



		}

		.appointment {
			width: 80%;
			height: 80rpx;
			background-color: #f49c1c;
			border-radius: 8rpx;
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			margin-left: -40%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
		}
	}
</style>
